<template>
    <div>
        <r-search :searchForm="searchForm" :searchHandle="searchHandle" :searchData="searchData" />

        <div v-if="role==3||role==4" class="pw100 mb20 flex flex_sa">
            <div class="flex_aj">
                <div class="mbox bg_1">
                    <p>账户总收益</p>
                    <p>{{bankinf&&bankinf.totalRevenue}}元</p>
                </div>
                <div class="mbox bg_2">
                    <p>可提余额</p>
                    <p>{{bankinf&&bankinf.withdrawMoney}}元</p>
                </div>
            </div>
            <div class="flex column bd">
                <div class="ft13">
                    <p class="flex_a sb">
                        <i>银行卡号: {{bankinf&&bankinf.bankCard||'暂无'}}</i>
                        <i style="cursor:pointer" class="btn" @click="dialogVisible=true">修改</i>
                    </p>
                    <p class="mt10">开户行: {{bankinf&&bankinf.bank||'暂无'}}</p>
                    <p class="mt10">开户人名称: {{bankinf&&bankinf.holder||'暂无'}}</p>
                </div>
                <p style="cursor:pointer" @click="dialogVisible2=true" class="btn mt20 tac">发起提现</p>
            </div>
        </div>
        <r-table :isPagination="true" :tableData="tableData" :tableCols="tableCols" :tablePage="tablePage" @refresh="init()"></r-table>
        <el-dialog title="修改提现信息" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
            <p class="flex_a">
                <i class="nw flex1 mr20"><i class="danger">*</i> 银行卡号</i>
                <el-input class="flex5" v-model="inf.bankCard" placeholder="请输入银行卡号"></el-input>
            </p>
            <p class="flex_a mt20">
                <i class="nw flex1 mr20"><i class="danger">*</i> 开户行</i>
                <el-input class="flex5" v-model="inf.bank" placeholder="请输入开户行"></el-input>
            </p>
            <p class="flex_a mt20">
                <i class="nw flex1 mr20"><i class="danger">*</i> 开户人姓名</i>
                <el-input class="flex5" v-model="inf.holder" placeholder="请输入开户人姓名"></el-input>
            </p>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="enterEdit">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="申请提现" :visible.sync="dialogVisible2" width="40%" :before-close="handleClose">
            <!-- <span>这是一段信息</span> -->
            <p>
                <i class="fw c6">可提余额: </i>
                <i class="ft40 c6 fw">￥{{bankinf&&bankinf.withdrawMoney}}</i>
            </p>
            <p class="mt20 flex column">
                <i class="nw flex1 mr20"><i class="danger">*</i> 提现金额</i>
                <el-input class="flex5 mt10" v-model="money" placeholder="请输入提现金额"></el-input>
            </p>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="enterTake">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            dialogVisible: false,
            dialogVisible2: false,
            bankinf: {},
            inf: {},
            money: '',
            searchData: {
                number: '',
                name: '',
                roleType: '',
                state: '',
                etime: '',
                updateEtime: '',
                sType: '2'
            },
            searchForm: [
                {
                    type: 'input',
                    prop: 'number',
                    placeholder: '订单编号',
                    width: 150
                },
                {
                    type: 'input',
                    prop: 'name',
                    placeholder: '提现对象',
                    width: 150,
                    isShow: e => sessionStorage.getItem('role') == 2
                },
                {
                    type: 'select',
                    prop: 'roleType',
                    placeholder: '类型',
                    width: 150,
                    options: [
                        {
                            label: '代理商',
                            value: 3
                        },
                        {
                            label: '商家',
                            value: 4,
                        },
                    ],
                    isShow: e => sessionStorage.getItem('role') == 2
                },
                {
                    type: 'select',
                    prop: 'state',
                    placeholder: '状态',
                    width: 150,
                    options: [
                        {
                            label: '未通过',
                            value: 2
                        },
                        {
                            label: '已通过',
                            value: 1
                        },
                        {
                            label: '待审核',
                            value: 3
                        },
                    ]
                },
                {
                    type: 'date',
                    prop: 'etime',
                    placeholder: '申请时间',
                    width: 160
                },
                {
                    type: 'date',
                    prop: 'updateEtime',
                    placeholder: '处理时间',
                    width: 160
                },
            ],
            searchHandle: [
                {
                    label: '搜索',
                    type: 'success',
                    icon: 'el-icon-search',
                    handle: e => this.init()
                },
                {
                    label: '重置',
                    icon: 'el-icon-refresh-right',
                    handle: e => this.searchFromReset()
                },
                {
                    label: "导出Excel",
                    icon: 'el-icon-download',
                    type: "success",
                    loading: false,
                    handle: (that) => this.handleDownload(),
                },
            ],
            tableData: [

            ],
            tableCols: [
                {
                    label: '提现编号',
                    prop: 'number',
                    // theme: e => e.status ? 'primary' : 'danger', type: "tag",
                },
                {
                    label: '申请时间',
                    prop: 'createdTime'
                },
                {
                    label: '提现类型',
                    prop: 'type',
                    formatter: e => e.type == 1 ? '银行卡' : e.type == 2 ? '微信' : e.type == 3 ? '支付宝' : ''
                },
                {
                    label: '提现对象',
                    prop: 'name'
                },
                {
                    label: '提现金额',
                    prop: "money",
                },
                {
                    label: '状态',
                    prop: 'state',
                    theme: e => e.state == 2 ? 'danger' : e.state == 1 ? 'success' : 'primary', type: "tag",
                    formatter: e => e.state == 1 ? "审核通过" : e.state == 2 ? '审核不通过' : e.state == 3 ? '待审核' : ''

                },
                {
                    label: '处理人',
                    prop: 'updatedBy'
                },
                {
                    label: '处理时间',
                    prop: 'updatedTime',
                    width: 160,
                    formatter: e => e.updatedTime&&this.getDeta(+new Date(e.updatedTime.replace(/T/g, ' ')))
                },
                {
                    label: '操作',
                    type: "button",
                    btnList: [
                        {
                            label: '查看详情',
                            type: 'primary',
                            // isShow: e => e.state == '未处理' ? false : true,
                            handle: e => this.goDetail(e.number)
                        },
                    ]
                }
            ],
            tablePage: { limit: 10, page: 1, total: 0 },
            role: 0
        };
    },
    components: {},
    computed: {},
    mounted() {
        this.init()
    },
    methods: {
        async init() {
            this.role = sessionStorage.getItem('role')
            let parm = { ...this.tablePage, ...this.searchData }
            let res = await this.api.takecashList(parm)
            if (res.data) {
                this.tableData = res.data.list
                this.tablePage.total = res.data.total
            }
            let res2 = await this.api.getbank()
            if (res2) {
                this.bankinf = res2.data
                this.inf = {
                    bankCard: res2.data.bankCard,
                    bank: res2.data.bank,
                    holder: res2.data.holder,
                }
            }
        },
        open() {
            this.$message({
                message: '修改成功',
                type: 'success'
            });
        },
        open2() {
            this.$message({
                message: '申请成功',
                type: 'success'
            });
        },
        async enterEdit() {
            let res = await this.api.setbank({ ...this.inf })
            if (res) {
                this.dialogVisible = false
                this.open()
                this.init()
            }
        },
        async enterTake() {
            let res = await this.api.takemoney({ bankInfo: JSON.stringify(this.inf), money: this.money })
            if (res) {
                this.dialogVisible2 = false
                this.open2()
                this.init()
            }
        },
        handleClose() {
            this.dialogVisible = false
            this.dialogVisible2 = false
        },
        goDetail(number) {
            this.$router.push({ path: '/moneyManagement-Detail', query: { number } })
        },
        //搜索
        elFormSubmit() {

        },
        formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => {
                // if (j === 'connectedStatus') {
                //     return v[j] == 1 ? "在线" : "离线"
                // } else if (j === 'status') {
                //     return v[j] == 1 ? "正常" : v[j] == 2 ? "设备维护中" : "未激活"
                // } else {
                return v[j]
                // }
            }))
        },
    }
};
</script>
<style scoped lang='scss'>
.mbox {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  min-width: 200px;
  p:first-child {
    margin-bottom: 20px;
  }
}
.bg_1 {
  background-color: rgba(0, 153, 204, 1);
}
.bg_2 {
  background-color: rgba(102, 102, 204, 1);
}
.btn {
  padding: 5px 10px;
  background: #3399ff;
  color: #fff;
}
.bd {
  min-width: 300px;
  border: 1px solid #f5f5f5;
  padding: 10px 20px;
}
.nw {
  white-space: nowrap;
}
.danger {
  color: #f12b2b;
}
</style>